<template>
    <view class="container">
        <view class="form">
            <u-form
                labelPosition="left"
                :model="form"
                :rules="rules"
                ref="form1"
                labelWidth="168rpx"
                labelAlign="center"
            >
                <u-form-item
                    label="收 货 人"
                    prop="name"
                    borderBottom
                >
                    <u-input
                        v-model="form.name"
                        border="none"
                        placeholder="请填写收货人姓名"
                    ></u-input>
                </u-form-item>
                <u-form-item
                    label="手机号码"
                    prop="mobile"
                    borderBottom
                >
                    <u-input
                        v-model="form.mobile"
                        border="none"
                        placeholder="请填写收货人手机号码"
                    ></u-input>
                </u-form-item>
                <u-form-item
                    label="收货地址"
                    prop="detail"
                    borderBottom
                >
                    <u-input
                        v-model="form.detail"
                        border="none"
                        placeholder="请填写收件人详细地址"
                    ></u-input>
                </u-form-item>
                <view class="default">
                    <u-form-item
                        label="设置默认地址"
                        prop="default"
                        labelWidth="200rpx"
                    >
                        <view class="switch">
                            <u-icon width="93rpx" height="54rpx" :name="form.default? switchActionIcon:switchIcon" @click="form.default = !form.default"></u-icon>
                        </view>
                    </u-form-item>
                </view>
            </u-form>
        </view>
        <view class="bottom">
            <u-button
                text="保存地址"
                class="custom-style"
                :customStyle="{
                    background: '#000000',
                    color: '#ffffff'
                }"
                :throttleTime="1500"
                @click="save()"
            ></u-button>
        </view>
    </view>
</template>

<script>
import { saveUserAddress } from "@/config/api"
export default {
    data() {
        return {
            rules: {},
            form: {
                name: "",
                mobile: "",
                detail: "",
                default: false
            },
            switchIcon: "https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_switch.png",
            switchActionIcon: "https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_switch_action.png"
        }
    },
    onLoad(option) {
        if (option.id) {
            this.form = {
                id: option.id,
                name: option.name,
                mobile: option.mobile,
                detail: option.detail,
                default: option.id == this.$store.getters.defaultAddressId
            }
        }
    },
    methods: {
        async save() {
            const res = await saveUserAddress(this.form, {custom: {auth: true}})
            if (this.form.default) {
                this.$store.dispatch("user/setDefaultAddress", res.id)
            }
            uni.showToast({
                title: "地址保存成功",
                icon: "success",
                success: ()=> {
                    uni.$u.route({
                        type: "navigateBack"
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .container {
        .form {
            padding: 40rpx 20rpx;
        }
        .default {
            margin-top: 40rpx;
            position: relative;
            .switch {
                position: absolute;
                right: 0;
                top: 50%;
                margin-top: -27rpx;
            }
        }
        .bottom {
            position: fixed;
            box-sizing: border-box;
            width: 100%;
            padding: 0 20rpx;
            bottom: 33rpx;
            left: 0;
        }
    }
</style>
